<template>
  <div id="app">
    <!-- LayOut---一行24 -->
    <!-- el-row:行 -->
    <!-- el-col:列 -->
    <!-- <el-radio v-model="sex" label="1">男</el-radio>
    <el-radio v-model="sex" label="2">女</el-radio> -->
    <el-radio v-model="sex" :label="1">男</el-radio>
    <el-radio v-model="sex" :label="2">女</el-radio>
    <br />
    <el-radio-group v-model="radio">
      <el-radio :label="3" border>备选项</el-radio>
      <el-radio :label="6">备选项</el-radio>
      <el-radio :label="9">备选项</el-radio>
    </el-radio-group>
    <br />
    <el-radio-group v-model="radio1" @change="prochange">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>

    <el-checkbox-group v-model="checkList">
      <el-checkbox label="复选框 A"></el-checkbox>
      <el-checkbox label="复选框 B"></el-checkbox>
      <el-checkbox label="复选框 C"></el-checkbox>
      <el-checkbox label="禁用" disabled></el-checkbox>
      <el-checkbox label="选中且禁用" disabled></el-checkbox>
    </el-checkbox-group>

    <el-input-number
      v-model="num"
      @change="handleChange"
      :min="1"
      :max="10"
      label="描述文字"
    ></el-input-number>

    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>

    <el-switch
      v-model="switchValue"
      active-color="#13ce66"
      inactive-color="#ccc"
    >
    </el-switch>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      sex: 1,
      radio: 6,
      radio1: "广州",
      checkList: ["禁用", "选中且禁用"],
      num: 1,
      value: "选项3",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      switchValue: true,
      form: {
        name: "",
        region: "",
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    prochange(e) {
      console.log(e);
    },
    handleChange(e) {
      console.log(e);
    },
  },
};
</script>

<style>
body {
  margin: 0;
}
.el-row {
  /* background-color: pink; */
}
.el-col {
  /* border: 1px solid red;
  box-sizing: border-box;
  padding: 10px; */
}
.el-col div {
  background: yellow;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
